<!DOCTYPE html>
<html style="overflow:hidden">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="public/css/lq.datetimepick.css" />
    <link rel="stylesheet" type="text/css" href="public/css/buttons.css" />
    <link rel="stylesheet" type="text/css" href="public/css/dialog.css" />
    <!-- <link rel="stylesheet" type="text/css" href="public/css/global.css" /> -->
    <link rel="stylesheet" type="text/css" href="public/css/animate.css" />
</head>

<body style="margin:4px;overflow-y:hidden;user-select: none;cursor:default">
    <div id="sxlDiv"></div>
    <div style="border-bottom: 1px solid #d3dcdd;margin-top:8px;margin-bottom:8px">
    </div>
    <div style="position:relative">
        <div>
            <input id="nameInput" placeholder="输入姓名以将其加入白名单,白名单用户将不参与考勤统计" type="text">
            <button id="addNameButton" class="button button-rounded button-primary">添加</button>
        </div>
    </div>
    <div id="divTags">
    </div>
    <div style="border-bottom: 1px solid #d3dcdd;margin-top:8px;margin-bottom:8px"></div>
    <div style="width:100%">
        <button style="width:100%" id="btnSelectFile" class="button button-block button-rounded button-primary button-large">选择考勤记录Excel表格</button>
        <div id="divResult"></div>
    </div>
</body>
<script>
    var $ = jQuery = require('jquery');
    var moment = require('moment');
</script>
<script src='public/js/selectUi.js' type='text/javascript'></script>
<script src='public/js/dialog.js' type='text/javascript'></script>
<script src='public/js/lq.datetimepick.js' type='text/javascript'></script>
<script>
    // You can also require other files to run in this process
    var renderer = require('./renderer.js');
    var {
        shell
    } = require('electron')
    var m = moment().add(-10, 'd');
    $('#sxlDiv').val(m.format('YYYY-MM-DD')).lqdatetimepicker({
        css: 'datetime-day',
        dateType: 'D',
        selectback: function($e) {
            if ($e.text()) {
                $e.toggleClass('selected')
            }
        },
        date: {
            'H': {
                begin: '8:00', //开始时分
                end: '23:30', //结束时分
                step: "30" //时分步长
            },
            'D': {
                month: m._d,
                selected: m._d.getDate()
            },
            'M': {
                begin: 1, //月份开始
                end: 12, //月份结束
                selected: m._d.getMonth() + 1 //月份初始
            },
            'Y': {
                begin: 2001, //年份开始
                end: m._d.getFullYear(), //年份结束
                selected: m._d.getFullYear() //年份初始
            }
        }
    });
    $('<div class="selectul select_ul_ui" style="z-index: 10;font-size:18px;font-weight:bold;line-height:30px;width:556px">设定工作日</div>').prependTo('.datetime-select');
    $('.datetime-select')

    var $divTags = $('#divTags')
    var addTag = function(name) {
        var $tag = $('<div class="tag"><div class="tag-name">' + name + '</div></div>')
        $tag.find('div').click(function() {
            $tag.remove();
        })
        var $del = $('<div class="del">×</div>');
        $tag.append($del).appendTo($divTags);
        $del.click(function() {
            $tag.remove();

            var whiteListNames = localStorage.getItem('whiteListNames');
            if (!whiteListNames) {
                whiteListNames = [];
            } else {
                whiteListNames = JSON.parse(whiteListNames)
            }
            whiteListNames.splice(whiteListNames.indexOf(name), 1);
            localStorage.setItem('whiteListNames', JSON.stringify(whiteListNames))
        })
    }




    var $nameInput = $('#nameInput');
    $('#addNameButton').click(function() {
        var name = $nameInput.val();
        if (name) {
            var whiteListNames = localStorage.getItem('whiteListNames');
            if (!whiteListNames) {
                whiteListNames = [];
            } else {
                whiteListNames = JSON.parse(whiteListNames)
            }
            if (whiteListNames.indexOf(name) < 0) {
                whiteListNames.push(name);
            }
            localStorage.setItem('whiteListNames', JSON.stringify(whiteListNames))
            addTag(name);
            $nameInput.val('').focus();
        }
    })
    $nameInput.on('keyup', function($e) {
        if ($e.keyCode == 13) {
            $('#addNameButton').click();
        }
    });

    (function() {
        var whiteListNames = localStorage.getItem('whiteListNames');
        if (whiteListNames) {
            whiteListNames = JSON.parse(whiteListNames);
            whiteListNames.forEach(function(element) {
                addTag(element);
            });
        }
    })();

    $('#btnSelectFile').click(function() {
        var whiteList = [];
        var workdays = [];
        $('.tag-name').each(function() {
            whiteList.push($(this).text())
        });

        $('.realday.selected').each(function() {
            workdays.push($(this).data('value'))
        });
        // return;
        renderer.openDialog(whiteList, workdays, moment(window.selectMonth).format('YYYY-MM'), function(destPath) {
            console.log(arguments)
            $('body').dialog({
                type: 'success',
                discription: '处理已完成！点击确定打开所在文件夹',
                // buttons: ['确定']
            }, function(ret) {
                if (ret.index == 0) {
                    shell.showItemInFolder(destPath)
                    console.log('确定')
                }
            })

        }, function(errorMsg) {
            $('body').dialog({
                title: '错误',
                type: 'danger',
                discription: errorMsg,
                buttons: ['确定']
            })
        });
    })
</script>

</html>